<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>质量在线问卷调查</title>
    <style>
        @CHARSET "utf-8";
        *{
            margin:0;padding:0;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-text-size-adjust:100%;
            box-sizing:border-box;
            -webkit-box-sizing:border-box; /* Safari */
            -moz-box-sizing:border-box; /* Firefox */
            -ms-text-size-adjust: 100%;
            -webkit-overflow-scrolling: touch;
        }
        input[type=search]::-webkit-search-cancel-button { display: none;}
        html{font:20px/1.20 'Helvetica',Arial,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
        html,body{font-family: 'Helvetica',Arial,sans-serif;}
        body,p,form,input,button,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6{margin:0;padding:0;overflow-x:hidden;}
        p{line-height:1.3;}
        ul,li{margin:0;padding:0;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}
        input,textarea,select{-webkit-user-select:text;-ms-user-select:text;user-select:text;}
        textarea{resize:none;}
        *:not(input,textarea) {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
        table{border-collapse:collapse;}
        input,select,textarea{outline:none;border:none;background:none;}
        a{text-decoration:none;-WebKit-touch-callout:none;outline:0;cursor:pointer;color:#333333;}
        a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
        li,ol{list-style:none;}
        .clearfix{*zoom:1;}
        .clearfix:after{display:block;overflow:hidden;clear:both;height:0;visibility:hidden;content:".";}
        body{margin:0 auto;width:100%;background-color:#ffffff;color:#444444;font-size:0.85rem;text-align:justify; text-justify:auto;}
        img{border:none;vertical-align:middle;}
        video{max-width:100%;max-height: 100%}
        ::-webkit-scrollbar{width: 0;height: 0;}
        ::-webkit-input-placeholder {color:#999999;}
        ::-webkit-scrollbar-track {background-color: transparent;} /* 滚动条的滑轨背景颜色 */
        ::-webkit-scrollbar-thumb {background-color: transparent;} /* 滑块颜色 */
        ::-webkit-scrollbar-button {background-color: transparent;} /* 滑轨两头的监听按钮颜色 */
        ::-webkit-scrollbar-corner {background-color: transparent;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
        /*公共样式*/
        .fl{float:left;}
        .fr{float:right;}
        .pos-r{position: relative;}
        .pos-a{position: absolute;}
        .pos-f{position: fixed;}
        .txtalign-l{text-align: left !important;}
        .txtalign-c{text-align: center !important;}
        .txtalign-r{text-align: right !important;}
        .dis-n{display:none;}
        .dis-b{display:block;}

        .fz-6{font-size: 0.6rem;}
        .fz-7{font-size: 0.7rem;}
        .fz-8{font-size: 0.8rem;}
        .fz-9{font-size: 0.9rem;}

        .mt-20{margin-top: 0.5rem;}
        .mt-30{margin-top: 0.75rem;}
        .mt-40{margin-top: 1rem;}
        .ml-20{margin-left: 0.5rem;}
        .pl-20{padding-left: 0.5rem;}
        .mt-80{margin-top: 2rem;}
        .mt-100{margin-top: 2.5rem;}
        .mt-120{margin-top: 3rem;}
        /*-------------------------------------------------------------*/
        @media screen and (min-width: 320px) {html{font-size:106.6666%;}}
        @media screen and (min-width: 360px) {html{font-size:120%;}}
        @media screen and (min-width: 375px) {html{font-size:125%;}}
        @media screen and (min-width: 384px) {html{font-size:128%;}}
        @media screen and (min-width: 393px) {html{font-size:131%;}}
        @media screen and (min-width: 400px) {html{font-size:133.3333%;}}
        @media screen and (min-width: 412px) {html{font-size:137.333333%;}}
        @media screen and (min-width: 414px) {html{font-size:138%;}}
        @media screen and (min-width: 440px) {html{font-size:146.6666%;}}
        @media screen and (min-width: 480px) {html{font-size:160%;}}
        @media screen and (min-width: 520px) {html{font-size:173.3333%;}}
        @media screen and (min-width: 560px) {html{font-size:186.6666%;}}
        @media screen and (min-width: 600px) {html{font-size:200%;}}
        @media screen and (min-width: 640px) {html{font-size:213.3333%;}}
        @media screen and (min-width: 680px) {html{font-size:226.6666%;}}
        @media screen and (min-width: 720px) {html{font-size:240%;}}
        @media screen and (min-width: 760px) {html{font-size:253.3333%;}}
        @media screen and (min-width: 800px) {html{font-size:266.6666%;}}
        @media screen and (min-width: 1080px) {html{font-size:360%;}}
        @media screen and (min-width: 1200px) {html{font-size:400%;}}
        @media screen and (min-width: 1280px) {html{font-size:426.6666%;}}
        html,body{
            width: 100%;
            height: 100%;
        }
        .msk {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            background-image: url("./images/bg1.png");
            background-repeat: no-repeat;
            background-position: center center;
            transform: translate3d(0,0,-1px);
            overflow: scroll;
        }
        .main{
            background: rgba(253, 253, 254, 0.2);
            color: #ffffff;
            min-height: 100%;
            overflow: hidden;
            padding: 0 0.75rem 1.5rem;
        }
        .main p{
            line-height: 1.6;
        }
        .wenjuanIput {
            width: 100%;
            height: 1.6rem;
            background-color: #ffffff;
            padding-left: 0.5rem;
            color: #666666;
            border: 1px solid #ffffff;
        }
        .wenjuanIput:focus{border-color: #3498DB;}
        .wenjuanIput.borErr{border-color: #DA2824;}
        .wenjuanCkb {
            width: 1rem;
            height: 1rem;
            float: left;
        }
        .btnSumB {
            text-align: center;
            background-color: rgba(250, 251, 252, 0.4);
            padding: 20px 30px;
            line-height: 0;
        }

        .btnSum {
            max-width: 100%;
            min-width: 60px;
            line-height: 1.2;
            font-size: 14px;
            border-radius: 2px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 36px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
            font-weight: normal;
            color: #FFFFFF;
            background: #3498DB;
            border: none;
        }
        .colred {
            color: #DA2824;
            font-size: 0.7rem;
        }
        .fuzng {
            padding-left: 1.6rem;
            margin-top: 0.5rem;
        }
        .tip{
            font-size: 0.7rem;
            text-align: center;
            width: 70%;
            min-height: 1rem;
            color: #ffffff;
            background-color: rgba(0,0,0,0.7);
            position: fixed;
            top: 40%;
            left: 50%;
            margin-left: -35%;
            padding: 1rem;
            -webkit-animation:bounceinT 0.8s;
            animation:bounceinT 0.8s;
            line-height: 1.5;
        }
        .tip a{
            display: block;
            width: 70%;
            border-radius: 3px;
            margin: 0.7rem auto 0;
            color: #FFFFFF;
            background: #3498DB;
            font-size: 0.8rem;
            padding: 0.2rem 0;
        }

        @-webkit-keyframes bounceinT{
            0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
            40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
            70%{-webkit-transform:perspective(400px) rotateX(10deg)}
            100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
        }
        @keyframes bounceinT{
            0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
            40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
            70%{-webkit-transform:perspective(400px) rotateX(10deg)}
            100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
        }
    </style>
</head>
<body>
<div class="msk"></div>
<div class="main">
    <p class="txtalign-c mt-30 fz-9"><strong>问卷调查</strong></p>
    <p class="txtalign-c mt-30 fz-8">直取干货，不走弯路！质量领域专业平台“质量在线”期待您的加入！</p>
    <p class= "mt-40 fz-7">下面请花费3分钟时间，认真填写问卷，您的反馈对我们十分重要！您可以在文本框内输入详细回答或勾选您认为符合您情况的选项。我们将在后台抽选部分用户，于国庆节后送出小礼品以示感谢！</p>
    <form  id="formId">
        <p class="mt-30 fz-8">1.您目前所在的行业是？</p>
        <input class="wenjuanIput mt-20" id="ha1" type="text" placeholder="在这里输入您的回答！"/>
        <p class="mt-40 fz-8">2.您的产品是否有可靠性问题？</p>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb1"><input name="one" value="是" id="wenjuanCkb1" onchange="duiCkb(this,'wenjuanCkb2')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">是</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb2"><input name="one" value="否" id="wenjuanCkb2" onchange="duiCkb(this,'wenjuanCkb1')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">否</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb3"><input id="wenjuanCkb3" class="wenjuanCkb changT" type="checkbox" data-name="oneM"/> <span class="fl ml-20">点此描述具体问题</span></label>
        <p class="mt-40 fz-8">3.可靠性问题是否是您关注的重要产品问题？</p>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb4"><input name="two" value="是" id="wenjuanCkb4" onchange="duiCkb(this,'wenjuanCkb3')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">是</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb5"><input name="two" value="否" id="wenjuanCkb5" onchange="duiCkb(this,'wenjuanCkb4')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">否</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb6"><input id="wenjuanCkb6" class="wenjuanCkb changT" type="checkbox" data-name="twoM"/> <span class="fl ml-20">点此详细说明关注程度</span></label>
        <p class="mt-40 fz-8">4.针对可靠性方面的问题您是否愿意改进？</p>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb7"><input name="thr" value="是" id="wenjuanCkb7" onchange="duiCkb(this,'wenjuanCkb8')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">是</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb8"><input name="thr" value="否" id="wenjuanCkb8" onchange="duiCkb(this,'wenjuanCkb7')" class="wenjuanCkb" type="checkbox"/> <span class="fl ml-20">否</span></label>
        <label class="dis-b pl-20 clearfix mt-20" for="wenjuanCkb9"><input id="wenjuanCkb9" class="wenjuanCkb changT" type="checkbox" data-name="thrM"/> <span class="fl ml-20">点此输入详细描述</span></label>
        <p class="mt-30 fz-8">姓名 <span class="colred">*</span></p>
        <input class="wenjuanIput mt-20 repu" name="xingming" type="text" />
        <p class="mt-20 fz-8">公司 <span class="colred">*</span></p>
        <input class="wenjuanIput mt-20 repu" name="gongsi" type="text" />
        <p class="mt-20 fz-8">手机 <span class="colred">*</span></p>
        <input class="wenjuanIput mt-20 repu" name="shouji" type="text" />
    </form>
</div>
<div class="btnSumB">
    <button id="btnSum" class="btnSum">提交</button>
</div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
    //      对对单选
    function duiCkb(that,idd){
        if($(that).prop('checked')){
            console.log($('#' + idd));
            $('#'+idd).prop('checked',false)
        }
    }
    $(function(){
//      输入详细信息
        $('.changT').on('change',function(){
            var dataId = $(this).attr('id'),dataname = $(this).attr('data-name'),enxtEle = $(this).parent('label');
            var inpT = $('<div class="fuzng"><input name= '+ dataname + ' class="wenjuanIput '+ dataId +' repu"  type="text"/></div>'),renT = $('<span class="colred">*</span>');
           if($(this).prop('checked')){
               enxtEle.after(inpT).append(renT);
           }else{
               $('input.'+dataId).parent('.fuzng').remove();
               enxtEle.children('.colred').remove();
           }
        })
//      验证
        function vali(){
            var arrEle = $('.repu'), bl = true;
            arrEle.each(function(){
                var $val = $(this).val().trim();
                if($val == ''|| $val == undefined){
                    if(!$(this).hasClass('borErr')){
                        $(this).addClass('borErr').after($('<span class="colred">请填写此选项</span>'));
                        $(this).on('focus', valiYes);
                    }
                    bl = false;
                }
            });
            return bl;
        }
//      验证取消
        function valiYes(){
            $(this).off('focus', valiYes);
            $(this).removeClass('borErr').next('span.colred').remove();
        }


//      提交
        $('#btnSum').on('click',function(){
            var v = vali();
            if(!v){
                $('.borErr')[0].scrollIntoView();
                return;
            };
            var dataobj = $('#formId').serializeArray() ;
            var resultDesc = '[{"title":"您目前所在的行业是？","answer":"'+ $('#ha1').val() +'"},' +
                    '{"title":"您的产品是否有可靠性问题？","answer":"'+ $('input[name=one]').val()+ $('input[name=oneM]').val()  +'"},' +
                    '{"title":"可靠性问题是否是您关注的重要产品问题？","answer":"'+ $('input[name=two]').val()+ $('input[name=twoM]').val()  +'"},' +
                    '{"title":"针对可靠性方面的问题您是否愿意改进？","answer":"'+ $('input[name=thr]').val()+ $('input[name=thrM]').val()  +'"}]';
            var jsonStr = '{' +
                    '"name":"'+ $('input[name=xingming]').val() +'",' +
                    '"company":"'+ $('input[name=gongsi]').val() +'",' +
                    '"moble":"'+ $('input[name=shouji]').val() +'",' +
                    '"resultDesc":'+ resultDesc +'}';


            jsonStr = jsonStr.replace(/undefined/g," ");
            console.log(jsonStr);
//            调查问卷
            $.ajax({
                url:'./index.html',
                type: 'POST',
                data: dataobj,
                dataType: 'JSON',
                success:function(data){
                    if(data.code==1000){
                        console.log('上传成功');
                    }
                }
            })
//           专家信息登陆
            $.ajax({
                url:'./index.html',
                type: 'POST',
                data: dataobj,
                dataType: 'JSON',
                success:function(data){
                    if(data.code==1000){
                        console.log('上传成功自动登录');
                        window.location.href="http://www.qualityonline.com.cn/";
                    }
                    if(data.code==1001){
                        console.log('上传成功手动登录');
                        $('body').append($('<div class="tip hui-bounce">提交成功，点击确认按钮跳转至质量在线官网网站！<a href="http://www.qualityonline.com.cn/login">确定</a></div>')) ;
                    }
                }
            })
        })

    })

</script>
</body>
</html>